<!--  -->
<template>
  <div class="common-layout">
    <el-container>
      <el-header style="background-color: rgb(248, 248, 248);display: flex;flex-direction: column;justify-content: center;">
        <Head></Head>
      </el-header>

      <el-container>
        <el-aside width="200px" style="background-color: rgb(255, 255, 255)">
          <aside-left @handleSelect="handleSelect"></aside-left>
        </el-aside>
        <el-main
          v-if="activeComponent === 'community'"
          style="background-color: rgb(255, 255, 255); height: 800px"
          ><community @emitAsideRight="emitAsideRight" @showArticleByTag="showArticleByTag"></community>
        </el-main>
        <el-aside
          v-if="activeComponent === 'community'"
          width="400px"
          style="background-color: rgb(255, 255, 255)"
        >
          <aside-right :tag="sendAsideRight"></aside-right>
        </el-aside>
        <el-main
          v-if="activeComponent === 'communityarticle'"
          style="background-color: rgb(255, 255, 255); height: 800px"
          >
          <CommunityArticle :tagName=tagName @toCommunity="toCommunity"></CommunityArticle>
        </el-main>
        <el-main
          v-else-if="activeComponent === 'home'"
          style="background-color: rgb(255, 255, 255); height: 800px"
        >
          <home @toCommunity="toCommunity"></home>
        </el-main>
        <el-main
          v-else-if="activeComponent === 'history'"
          style="background-color: rgb(255, 255, 255); height: 800px"
        >
          <History></History>
        </el-main>
        <el-main
          v-else-if="activeComponent === 'relationuser'"
          style="background-color: rgb(255, 255, 255); height: 800px"
        >
          <RelationUser ></RelationUser>
        </el-main>
        <el-main
          v-else-if="activeComponent === 'collectarticle'"
          style="background-color: rgb(255, 255, 255); height: 800px"
        >
          <CollectArticle ></CollectArticle>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<script>
// 组件
import AsideLeft from "../components/AsideLeft.vue";
import Community from "../components/Community.vue";
import Home from "../components/Home.vue";
import AsideRight from "../components/AsideRight.vue";
import Head from "../components/Nav.vue";
import History from "../components/History.vue";
import RelationUser from "../components/RelationUser.vue";
import CollectArticle from "../components/CollectArticle.vue";
import CommunityArticle from "../components/CommunityArticle.vue";
// 其他

export default {
  name: "HomeView",
  components: { AsideLeft, Community, Home, AsideRight,Head,History,RelationUser,CollectArticle,CommunityArticle },
  props: {},
  data() {
    return {
      activeComponent: "home",
      sendAsideRight: "",
      lastActiveComponent:"",
      tagName:""
    };
  },
  computed: {},
  watch: {},
  methods: {
    handleSelect(key) {
      switch (key) {
        case "2-1":
          this.activeComponent = "community";
          break;
        case "2-2":
          this.activeComponent = "home";
          break;
        case "2-3":
          this.$router.push("/adminhome")
          break;
        case "3-2":
          this.activeComponent = "history";
          break;
        case "3-3-1":
          this.activeComponent = "relationuser";
          break;
        case "3-3-2":
          this.activeComponent = "collectarticle";
          break;
        // ... 其他 case 处理
      }
    },
    toCommunity(tagName){
      this.activeComponent = "communityarticle";
      this.tagName = tagName;
    },
    emitAsideRight(tag) {
      this.sendAsideRight = tag;
    },
    showArticleByTag(tag){
      this.activeComponent = "communityarticle"
      this.tagName = tag.name
    },
    refreshComponent(activeComponent){
      this.lastActiveComponent=activeComponent
    }
  },
  created() {
    if(this.$store.state.lastActiveComponent != ""){
      this.activeComponent = this.$store.state.lastActiveComponent
    }
  },
  mounted() {},
};
</script>

<style scoped>
* {
  padding: 0px;
  margin: 0px;
}
.common-layout {
  background-color: darkgray;
  overflow: hidden;
}
</style>

